<template>
	<view class="titleStyle"
		:style="{'padding':(topHeight ? topHeight : paddingTop ) + 'px 24rpx 20rpx 24rpx','background': bgcolor == '#FFF'?`url(${bgIMG});background-size:100% 100%;`:bgcolor,'box-sizing':boxSizing,'height':eleHeight ? eleHeight : height}">
		<view class="img-box flex-center align-center" @click="handleClick" :style="{'min-width':iconSize+'rpx',height:iconSize+'rpx'}"
			v-if="icon != ''">
			<!-- <image v-if="icon != 'icon'" :src="icon" mode="heightFix"></image> -->
			<u-icon name="arrow-left" :color="color" :size="iconSize" v-if="icon != 'icon'"></u-icon>
			<view class="" v-else>
				<view class="iconfont icongengduo icon-arr"></view>
			</view>
		</view>
		<view class="f-f flex-c" style="flex:.8">
			<text :class="{'center-text': center}"
				:style="{color:color,'font-weight': bold ? 'bold' : '500'}">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height:'auto',
				paddingTop: 0,
			}
		},
		props: {
			topHeight:{
				type:String,
				default:''
			},
			eleHeight:{
				type:String,
				default:''
			},
			boxSizing:{
				type:String,
				default:'content-box'
			},
			center: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: '电影订单'
			},
			icon: {
				type: String,
				default: ''
			},
			bgcolor: {
				type: String,
				default: '#FFF'
			},
			bgIMG: {
				type: String,
				default: 'https://img.piaohenduo.com/wapiaoLive/component_title-bg.png'
			},
			color: {
				type: String,
				default: '#000'
			},
			iconSize: {
				type: String,
				default: '36'
			},
			bold: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			handleClick() { //父组件的点击事件
				try{
			console.log('通知父组件',);
					this.$emit('toclick')
				}catch(e){
					console.log(e);
				}
				
			},
		},
		mounted() {
			let title = uni.createSelectorQuery().in(this).select('.titleStyle')
			title.boundingClientRect(data => {
				this.$emit('titleHeight', data)
			}).exec()
			
		},
		created() {
			this.$nextTick(() => {
				// this.paddingTop = this.$common.setWidthHeight()
				
				let menu = uni.getMenuButtonBoundingClientRect()
				this.paddingTop = menu.top
				this.height = menu.height + 'px'
				// console.log('menu',menu)
				// console.log('this.height',this.paddingTop)
			})
		},
	}
</script>

<style lang="scss">
	.titleStyle {
		position: fixed;
		top: 0;
		z-index: 999;
		display: flex;
		width: 100%;
		align-items: center;
		padding: 0 24rpx 10rpx 24rpx;

		.img-box {
			padding-right: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.icon-arr {
			font-weight: 600;
			transform: rotateZ(180deg);
			color: black;
			margin-left: 16rpx;
		}

		.center-text {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			margin: 0;
		}

		text {
			display: inline-block;
			line-height: 40rpx;
			font-size: 30rpx;
			text-align: left;
			margin-left: 8rpx;
		}
	}
</style>
